<template>
  <view class="photo-detail">
    <!-- 主内容区域 -->
    <view class="photo-display" v-if="photo">
      <image 
        :src="photoUrl" 
        mode="widthFix" 
        class="photo-image"
        @load="onImageLoaded"
        @error="handleImageError"
        :style="{opacity: imageLoaded ? 1 : 0}"
      ></image>

      <!-- 编辑按钮 -->
      <view class="edit-btn" @click="goEdit" v-if="photo && photo.userId === currentUserId">
        <text class="edit-icon">✏️</text>
      </view>

      <!-- 隐私标签 -->
      <view class="privacy-tag" v-if="photo.status === 0">
        <u-icon name="lock" size="16" color="#fff"></u-icon>
        <text>私密</text>
      </view>
    </view>

    <!-- 照片信息 -->
    <view class="photo-info" v-if="photo">
      <view class="info-header">
        <view class="title-section">
          <text class="photo-title">{{ photo.title || '无标题' }}</text>
        </view>
        <view class="user-info">
          <view class="user-meta">
            <text class="uploader-nickname">{{ photo.uploaderNickname }}</text>
            <text class="upload-time">{{ formatDate(photo.uploadTime) }}</text>
          </view>
          <image 
            class="uploader-avatar" 
            :src="uploaderAvatarUrl" 
            mode="aspectFill"
            @error="handleAvatarError"
          ></image>
        </view>
      </view>
      
      <view class="content-section" v-if="photo.description">
        <text class="photo-description">{{ photo.description }}</text>
      </view>
    </view>

    <!-- 交互区域 -->
    <view class="interaction-bar">
      <view class="interaction-area">
        <!-- 点赞按钮 -->
        <view class="interaction-item" @click="toggleLike">
          <u-icon 
            :name="photo.likedByCurrentUser ? 'heart-fill' : 'heart'" 
            size="32" 
            :color="photo.likedByCurrentUser ? '#ff5a5f' : '#666'"
          ></u-icon>
          <text :class="{'active': photo.likedByCurrentUser}">{{ photo.likeCount || 0 }}</text>
        </view>
        
        <!-- 收藏按钮 -->
        <view class="interaction-item" @click="toggleFavorite">
          <u-icon 
            :name="photo.favoriteByCurrentUser ? 'star-fill' : 'star'" 
            size="32" 
            :color="photo.favoriteByCurrentUser ? '#ffd700' : '#666'"
          ></u-icon>
          <text :class="{'active': photo.favoriteByCurrentUser}">{{ photo.favoriteCount || 0 }}</text>
        </view>
        
        <!-- 下载按钮 -->
        <view class="interaction-item" @click="saveImage">
          <u-icon name="download" size="32" color="#666"></u-icon>
          <text>下载</text>
        </view>
        
        <!-- 分享按钮 -->
        <view class="interaction-item" @click="handleShare">
          <u-icon name="share" size="32" color="#666"></u-icon>
          <text>分享</text>
        </view>
      </view>
    </view>

    <!-- 评论区 -->
    <view class="comment-section">
      <view class="comment-header">
        <text class="comment-title">评论</text>
        <text class="comment-count">{{comments.length}}</text>
      </view>
      
      <!-- 评论列表 -->
      <view class="comment-list" v-if="comments.length">
        <view class="comment-item" v-for="comment in comments" :key="comment.commentId">
          <image 
            class="comment-avatar" 
            :src="getAvatarUrl(comment.userAvatar)" 
            mode="aspectFill"
          ></image>
          <view class="comment-content">
            <view class="comment-user">
              <text class="comment-nickname">{{comment.userNickname}}</text>
              <text class="comment-time">{{formatDate(comment.createTime)}}</text>
              <!-- 删除按钮 -->
              <view 
                class="delete-btn" 
                v-if="photo && (comment.userId === currentUserId || photo.userId === currentUserId)"
                @click.stop="handleDeleteComment(comment.commentId)"
              >
                <u-icon name="trash" size="24" color="#999"></u-icon>
              </view>
            </view>
            <text class="comment-text">{{decodeCommentContent(comment.content)}}</text>
          </view>
        </view>
      </view>
      
      <!-- 评论占位 -->
      <view class="comment-placeholder" v-else>
        <text>暂无评论，快来抢沙发吧~</text>
      </view>
    </view>

    <!-- 评论输入框 -->
    <view class="comment-input-bar">
      <input 
        class="comment-input" 
        type="text" 
        placeholder="说点什么..." 
        placeholder-class="input-placeholder"
        v-model="commentText"
      />
      <view class="send-btn" @click="handleSendComment">发送</view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-icon">
        <u-loading-icon mode="circle" size="36" color="#3a8838"></u-loading-icon>
      </view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { getPhotoDetail, likePhoto, unlikePhoto, favoritePhoto, unFavoritePhoto } from '@/api/photo.js'
import { addComment, getCommentPage, deleteComment } from '@/api/comment.js'
import { formatDate } from '@/utils/date'
import { getImageBlob, getAvatarUrl } from '@/utils/image.js'
import config from '@/config/index.js'

export default {
  navigationBarTitleText: '照片详情',
  navigationStyle: 'default',
  enablePullDownRefresh: true,
  backgroundColor: '#f8f8f8',
  navigationBarButtonStyle: 'black',
  data() {
    return {
      photoId: '',
      photo: null,
      photoUrl: '',
      defaultAvatar: '/static/images/default-avatar.png',
      uploaderAvatarUrl: '/static/images/default-avatar.png',
      isLoading: true,
      imageLoaded: false,
      commentText: '',
      currentUserId: null,
      comments: [], // 评论列表
      isCommenting: false, // 是否正在发送评论
      currentPage: 1, // 当前页码
      pageSize: 20, // 每页大小
      hasMore: true, // 是否还有更多评论
      lastCommentId: null // 最后一条评论的ID
    }
  },
  onLoad(options) {
    // 获取照片ID
    this.photoId = options.id
    if (!this.photoId) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
      return
    }
    
    // 监听照片更新事件
    uni.$on('photo:updated', this.handlePhotoUpdate)
    
    // 获取当前用户信息
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      try {
        const userData = JSON.parse(userInfo)
        this.currentUserId = userData.userId
        console.log('当前用户ID:', this.currentUserId)
      } catch (e) {
        console.error('解析用户信息失败:', e)
      }
    }
    
    // 加载照片详情和评论列表
    this.isLoading = true
    Promise.all([
      this.loadPhotoDetail().catch(err => {
        console.error('加载照片详情失败:', err)
        uni.showToast({
          title: '加载照片详情失败',
          icon: 'none'
        })
        return null
      }),
      this.loadComments().catch(err => {
        console.error('加载评论列表失败:', err)
        uni.showToast({
          title: '加载评论失败',
          icon: 'none'
        })
        return null
      })
    ]).finally(() => {
      this.isLoading = false
      // 如果加载失败，延迟返回上一页
      if (!this.photo) {
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    })
  },
  onPullDownRefresh() {
    this.currentPage = 1
    this.hasMore = true
    this.comments = []
    this.loadComments().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    if (this.hasMore) {
      this.currentPage++
      this.loadComments()
    }
  },
  onUnload() {
    // 移除事件监听
    uni.$off('photo:updated', this.handlePhotoUpdate)
  },
  methods: {
    // 获取头像URL
    getAvatarUrl(avatar) {
      return getAvatarUrl(avatar)
    },
    // 加载照片详情
    async loadPhotoDetail() {
      try {
        const res = await getPhotoDetail(this.photoId)
        console.log('照片详情API返回:', res)
        if (res.data) {
          this.photo = res.data
          console.log('获取到照片数据:', this.photo)
          console.log('当前用户ID:', this.currentUserId)
          console.log('上传者ID:', this.photo.userId)
          
          // 处理照片URL - 使用getImageBlob，因为需要权限验证
          if (this.photo.photoPath) {
            try {
              console.log('开始处理照片路径:', this.photo.photoPath)
              const photoUrl = await getImageBlob(this.photo.photoPath)
              console.log('处理后的照片URL:', photoUrl)
              
              if (photoUrl) {
                this.photoUrl = photoUrl
              } else {
                console.error('照片URL处理失败')
                this.photoUrl = ''
              }
            } catch (err) {
              console.error('加载照片失败:', err)
              this.photoUrl = ''
            }
          } else {
            console.warn('照片没有photoPath属性')
            this.photoUrl = ''
          }
          
          // 处理上传者头像URL
          if (this.photo.uploaderAvatar) {
            console.log('处理上传者头像:', this.photo.uploaderAvatar)
            this.uploaderAvatarUrl = getAvatarUrl(this.photo.uploaderAvatar)
          } else {
            console.log('使用默认头像')
            this.uploaderAvatarUrl = this.defaultAvatar
          }
          
          // 初始化likeCount为0如果没有数据
          if (this.photo.likeCount === undefined) {
            this.photo.likeCount = 0
          }
        } else {
          throw new Error('未找到照片信息')
        }
      } catch (error) {
        console.error('加载照片详情失败:', error)
        uni.showToast({
          title: '加载照片详情失败',
          icon: 'none'
        })
        throw error // 重新抛出错误以便上层处理
      }
    },
    
    // 图片加载完成
    onImageLoaded() {
      console.log('图片加载完成')
      this.imageLoaded = true
    },
    
    // 头像加载错误处理
    handleAvatarError(e) {
      console.error('头像加载错误:', e)
      // 使用默认头像
      this.uploaderAvatarUrl = this.defaultAvatar
    },
    
    // 保存图片
    saveImage() {
      if (!this.photoUrl) {
        uni.showToast({
          title: '图片地址无效',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '保存中...'
      })
      
      uni.getImageInfo({
        src: this.photoUrl,
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.path,
            success: () => {
              uni.hideLoading()
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              })
            },
            fail: (err) => {
              uni.hideLoading()
              // 处理用户取消的情况
              if (err.errMsg && err.errMsg.indexOf('cancel') > -1) {
                console.log('用户取消保存')
                uni.showToast({
                  title: '已取消保存',
                  icon: 'none'
                })
              } else {
                console.error('保存图片失败:', err)
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                })
              }
            }
          })
        },
        fail: (err) => {
          uni.hideLoading()
          uni.showToast({
            title: '获取图片信息失败',
            icon: 'none'
          })
          console.error('获取图片信息失败:', err)
        }
      })
    },
    
    // 处理点赞/取消点赞
    async toggleLike() {
      if (!this.photo) return
      
      try {
        if (this.photo.likedByCurrentUser) {
          // 取消点赞
          await unlikePhoto(this.photoId)
          this.photo.likedByCurrentUser = false
          this.photo.likeCount = Math.max(0, this.photo.likeCount - 1)
        } else {
          // 点赞
          await likePhoto(this.photoId)
          this.photo.likedByCurrentUser = true
          this.photo.likeCount = (this.photo.likeCount || 0) + 1
        }
      } catch (error) {
        console.error('点赞操作失败:', error)
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 处理收藏/取消收藏
    async toggleFavorite() {
      if (!this.photo) return
      
      try {
        if (this.photo.favoriteByCurrentUser) {
          // 取消收藏
          await unFavoritePhoto(this.photoId)
          this.photo.favoriteByCurrentUser = false
          this.photo.favoriteCount = Math.max(0, (this.photo.favoriteCount || 0) - 1)
        } else {
          // 收藏
          await favoritePhoto(this.photoId)
          this.photo.favoriteByCurrentUser = true
          this.photo.favoriteCount = (this.photo.favoriteCount || 0) + 1
        }
      } catch (error) {
        console.error('收藏操作失败:', error)
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 处理分享按钮点击
    handleShare() {
      // 显示分享菜单
      uni.showActionSheet({
        itemList: ['分享给好友', '分享到朋友圈'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 分享给好友
            uni.showToast({
              title: '请点击右上角分享',
              icon: 'none',
              duration: 2000
            })
          } else if (res.tapIndex === 1) {
            // 尝试分享到朋友圈
            uni.showShareMenu({
              withShareTicket: true,
              menus: ['shareTimeline'],
              success: () => {
                uni.showToast({
                  title: '请点击右上角分享到朋友圈',
                  icon: 'none',
                  duration: 2000
                })
              },
              fail: (err) => {
                console.error('朋友圈分享失败:', err)
                uni.showToast({
                  title: '个人开发者不支持朋友圈分享',
                  icon: 'none'
                })
              }
            })
          }
        }
      })
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      
      // 处理日期格式兼容性问题 
      // 将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy/MM/dd HH:mm:ss" 或 "yyyy-MM-ddTHH:mm:ss"
      if (dateStr.includes(' ')) {
        // 方法1：使用/替换-，iOS支持 yyyy/MM/dd HH:mm:ss 格式
        const formattedDate = dateStr.replace(/-/g, '/');
        return formatDate(new Date(formattedDate), 'yyyy-MM-dd');
      }
      
      if (dateStr.includes('T')) {
        // 对于ISO格式的日期，需要特殊处理
        return formatDate(new Date(dateStr), 'yyyy-MM-dd');
      }
      
      return formatDate(new Date(dateStr), 'yyyy-MM-dd')
    },
    
    // 处理图片加载错误
    handleImageError(e) {
      console.error('图片加载错误:', e)
      
      // 如果图片加载失败，尝试重新使用getImageBlob加载
      if (this.photo && this.photo.photoPath) {
        console.log('尝试重新加载照片...')
        
        // 清除之前可能设置的错误URL
        this.photoUrl = ''
        
        // 使用setTimeout确保DOM有时间更新
        setTimeout(async () => {
          try {
            // 重新加载图片，确保使用getImageBlob处理
            const photoUrl = await getImageBlob(this.photo.photoPath)
            if (photoUrl) {
              console.log('重新加载成功，使用新URL:', photoUrl)
              this.photoUrl = photoUrl
            }
          } catch (err) {
            console.error('重新加载失败:', err)
          }
        }, 300)
      }
    },
    // 跳转到编辑页
    goEdit() {
      uni.navigateTo({
        url: `/pages/photo/edit?id=${this.photoId}`
      });
    },
    // 加载评论列表
    async loadComments() {
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          photoId: this.photoId,
          status: 0,
          notInApproved: 2  // 添加审核条件
        }
        
        // 只有当有评论时才添加commentId参数
        if (this.lastCommentId) {
          params.commentId = this.lastCommentId
        }
        
        console.log('加载评论列表参数:', params)
        const res = await getCommentPage(params)
        console.log('评论列表返回:', res)
        
        if (res.data) {
          const { records, total } = res.data
          console.log('评论数据:', records)
          console.log('当前用户ID:', this.currentUserId)
          console.log('照片上传者ID:', this.photo?.userId)
          
          // 如果是第一页,直接替换数据
          if (this.currentPage === 1) {
            this.comments = records
          } else {
            // 否则追加数据
            this.comments = [...this.comments, ...records]
          }
          
          // 判断是否还有更多数据
          this.hasMore = this.comments.length < total
          
          // 更新最后一条评论ID
          if (records.length > 0) {
            this.lastCommentId = records[records.length - 1].commentId
          } else {
            // 如果没有评论，清空lastCommentId
            this.lastCommentId = null
          }
        }
      } catch (error) {
        console.error('加载评论列表失败:', error)
        uni.showToast({
          title: '加载评论失败',
          icon: 'none'
        })
      }
    },
    // 处理发送评论
    async handleSendComment() {
      if (!this.commentText.trim()) {
        uni.showToast({
          title: '请输入评论内容',
          icon: 'none'
        })
        return
      }
      
      if (this.isCommenting) return
      
      this.isCommenting = true
      try {
        const res = await addComment(this.photoId, this.commentText.trim())
        if (res.data) {
          // 保存新评论的ID
          this.lastCommentId = res.data
          
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          })
          
          // 清空输入框
          this.commentText = ''
          
          // 重置分页并重新加载评论列表
          this.currentPage = 1
          this.hasMore = true
          this.comments = []
          await this.loadComments()
        }
      } catch (error) {
        console.error('发送评论失败:', error)
        uni.showToast({
          title: '评论失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isCommenting = false
      }
    },
    // 解码评论内容
    decodeCommentContent(content) {
      if (!content) return ''
      
      try {
        // 尝试解析JSON格式的内容
        const parsed = JSON.parse(content)
        return parsed.content || content
      } catch (e) {
        // 如果不是JSON格式，直接返回原内容
        return content
      }
    },
    // 处理删除评论
    async handleDeleteComment(commentId) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这条评论吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await deleteComment(commentId)
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              
              // 只从当前列表中移除被删除的评论
              this.comments = this.comments.filter(item => item.commentId !== commentId)
              
              // 如果当前页评论都被删完了，且不是第一页，则加载上一页
              if (this.comments.length === 0 && this.currentPage > 1) {
                this.currentPage--
                await this.loadComments()
              }
            } catch (error) {
              console.error('删除评论失败:', error)
              uni.showToast({
                title: '删除失败，请重试',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    // 处理照片更新事件
    handlePhotoUpdate({ photoId }) {
      if (photoId === this.photoId) {
        this.loadPhotoDetail()
      }
    }
  },
  
  // 分享给好友
  onShareAppMessage(res) {
    if (!this.photo) {
      return {
        title: '精彩照片分享',
        path: '/pages/index/index'
      }
    }
    
    return {
      title: this.photo.title || '精彩照片分享',
      path: `/pages/photo/detail?id=${this.photoId}&source=share`,
      imageUrl: this.photoUrl || '',
      success: function(res) {
        console.log('分享成功')
        uni.showToast({
          title: '分享成功',
          icon: 'success'
        })
      },
      fail: function(res) {
        console.log('分享失败')
      }
    }
  },

  // 分享到朋友圈
  onShareTimeline() {
    if (!this.photo) {
      return {
        title: '精彩照片分享',
        query: ''
      }
    }
    
    const title = this.photo.title || '精彩照片分享'
    const description = this.photo.description || ''
    
    return {
      title: description ? `${title} - ${description}` : title,
      query: `id=${this.photoId}&source=timeline`,
      imageUrl: this.photoUrl || '',
      success: function(res) {
        console.log('分享朋友圈成功')
        uni.showToast({
          title: '分享成功',
          icon: 'success'
        })
      },
      fail: function(res) {
        console.error('分享朋友圈失败:', res)
        uni.showToast({
          title: '分享失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.photo-detail {
  background-color: #f8f8f8;
  padding-bottom: env(safe-area-inset-bottom);
}

.photo-display {
  width: 100%;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.photo-image {
  width: 100%;
  display: block;
  transition: opacity 0.3s;
}

.edit-btn {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.edit-icon {
  font-size: 32rpx;
}

.privacy-tag {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  z-index: 1;
}

.privacy-tag text {
  margin-left: 8rpx;
}

.photo-info {
  padding: 24rpx 32rpx;
  background-color: #fff;
  border-radius: 0 0 24rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.title-section {
  flex: 1;
  margin-right: 20rpx;
}

.photo-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  letter-spacing: -0.5rpx;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex-shrink: 0;
}

.user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2rpx;
  justify-content: center;
}

.uploader-nickname {
  font-size: 24rpx;
  font-weight: 500;
  color: #333;
}

.upload-time {
  font-size: 22rpx;
  color: #999;
}

.uploader-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #f0f0f0;
  border: 2rpx solid #eee;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.content-section {
  padding-top: 24rpx;
}

.photo-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
  letter-spacing: 0.2rpx;
}

/* 交互区域样式 */
.interaction-bar {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.interaction-area {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.interaction-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 30rpx;
  border-radius: 8rpx;
  transition: all 0.3s;
}

.interaction-item:active {
  background-color: #f0f0f0;
  transform: scale(0.95);
}

.interaction-item text {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #666;
}

.interaction-item text.active {
  color: #ff5a5f;
}

/* 评论区样式 */
.comment-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 120rpx;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.comment-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.comment-count {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.comment-list {
  margin-top: 20rpx;
}

.comment-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  overflow: hidden;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  margin-right: 20rpx;
}

.comment-content {
  flex: 1;
  overflow: hidden;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
  position: relative;
  width: 100%;
  flex-wrap: wrap;
}

.comment-nickname {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-right: 16rpx;
}

.comment-time {
  font-size: 24rpx;
  color: #999;
  flex: 1;
}

.delete-btn {
  width: 60rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-btn:active {
  opacity: 0.7;
}

.comment-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  width: 100%;
  margin-top: 8rpx;
}

.comment-placeholder {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}

/* 评论输入框样式 */
.comment-input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
}

.comment-input {
  flex: 1;
  height: 72rpx;
  background-color: #f5f5f5;
  border-radius: 36rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.input-placeholder {
  color: #999;
}

.send-btn {
  width: 120rpx;
  height: 72rpx;
  background-color: #3a8838;
  color: #fff;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.send-btn:active {
  opacity: 0.8;
}

.loading-container {
  position: fixed;
  top: var(--window-top);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 200;
}

.loading-icon {
  margin-bottom: 20rpx;
}

.loading-text {
  color: #666;
  font-size: 28rpx;
}
</style> 